Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🚀 feat(PlanCard): Make ListItem clickable #670

Merged
merged 2 commits into from
Jul 18, 2023
Merged

Conversation

gabrielmaschke
Copy link
Contributor

@gabrielmaschke gabrielmaschke commented Jul 14, 2023

JIRA Issue

Description 📄

  • Add prop onClick to PlanCard.ListItem component and transform the wrapper in a button to make it accessible
  • Change proptype of the prop text, it should accept components such as Skeleton
<PlanCard discount="SAVE 40%">
  <PlanCard.Tag variant="informative">Active</PlanCard.Tag>
  <PlanCard.Content
    title="Gold"
    currency="$"
    price="99.90"
    period="/mo"
    badgeColor="energy"
  >
    <PlanCard.List>
      <PlanCard.ListItem icon={Checkin} text="2.900 gyms and studios" onClick={() => foo()} />
      <PlanCard.ListItem icon={Dumbbell} text="1x/day standard access" onClick={() => foo()} />
      <PlanCard.ListItem icon={User} text="4x/month 1-on-1 sessions" onClick={() => foo()} />
    </PlanCard.List>
  </PlanCard.Content>
</PlanCard>

Platforms 📲

  • Web
  • Mobile

Type of change 🔍

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested? 🧪

[Enter the tips to test this PR]

  • Unit Test
  • Snapshot Test

Checklist: 🔍

  • My code follows the contribution guide of this project Contributing Guide
  • Layout matches design prototype: FIGMA
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules
  • I have checked my code and corrected any misspellings

Screenshots 📸

No visual changes.

@gabrielmaschke gabrielmaschke self-assigned this Jul 14, 2023
@gabrielmaschke gabrielmaschke changed the title [EUEG-2847]: 🚀 Make list item clickable in PlanCard feat(PlanCard): 🚀 Make list item clickable in PlanCard Jul 14, 2023
@gabrielmaschke gabrielmaschke changed the title feat(PlanCard): 🚀 Make list item clickable in PlanCard feat(PlanCard): 🚀 Make ListItem clickable Jul 14, 2023
@gabrielmaschke gabrielmaschke changed the title feat(PlanCard): 🚀 Make ListItem clickable 🚀 feat(PlanCard): Make ListItem clickable Jul 14, 2023
display: flex;
min-width: 0;
align-items: center;

${props =>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clicks can also be a link, Should we add that option? Example:
If the component receives a href prop, we can assume element should be a <a> tag..

WDYT?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, beware that button should have the "type" attribute. (Maybe we can assume always type="button").

A helpful article: https://www.builder.io/blog/buttons

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clicks can also be a link, Should we add that option? Example: If the component receives a href prop, we can assume element should be a <a> tag..

WDYT?

I have discussed with the team, and for now, links are out of scope, at least within the context of Gympass.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, beware that button should have the "type" attribute. (Maybe we can assume always type="button").

A helpful article: https://www.builder.io/blog/buttons

Nice article! I completely agree. I added the button type in this commit: 5845523.

@MicaelRodrigues could you review it again please?

@matheushdsbr matheushdsbr merged commit 761be07 into master Jul 18, 2023
@matheushdsbr matheushdsbr deleted the EUEG-2847 branch July 18, 2023 17:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants